<template>
  <div class="tab">
    <RouterLink v-for="item in tab_item" :key="item.id" :to="item.url" :path="path">
      <img v-if="!item.isStatus" :src="item.qian" alt="" />
      <img v-if="item.isStatus" :src="item.hou" alt="" />
    </RouterLink>
  </div>
</template>

<script setup>
import { RouterLink, useRoute } from "vue-router";
const tab_item = [
  {
    id: 1,
    qian: "/src/imgs/Icon/智能检测 Normal.png",
    hou: "/src/imgs/Icon/智能检测.png",
    isStatus: false,
    url: "/",
  },
  {
    id: 2,
    qian: "/src/imgs/Icon/就业态势 Normal.png",
    hou: "/src/imgs/Icon/就业态势.png",
    isStatus: false,
    url: "/jiuye",
  },
  {
    id: 3,
    qian: "/src/imgs/Icon/安防管理 Normal.png",
    hou: "/src/imgs/Icon/安防管理.png",
    isStatus: false,
    url: "/anfang",
  },
  {
    id: 4,
    qian: "/src/imgs/Icon/设备运维 Normal.png",
    hou: "/src/imgs/Icon/设备运维.png",
    isStatus: false,
    url: "/shebei",
  },
];
const { path } = useRoute();
const obj = tab_item.find((item) => item.url === path);
obj.isStatus = true;  
</script>

<style lang="scss">
.tab {
  width: 100%;
  height: 100%;
  background: url("../imgs/bottom.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  a {
    margin: 2%;
    img {
      width: 80px;
      height: 80px;
    }
  }
}
</style>
